<template>
  <div>
    <el-row style="margin-top: 20px;margin-left: 20px;display: flex;justify-content: flex-start;align-items: center;">
      <span>最近12个月使用总量：{{yearFlowStatic}}GB</span>
    </el-row>
    <ve-histogram :data="chartData" style="width: 80%;margin: 20px 10%"></ve-histogram>
  </div>
</template>

<script>
  import {monthFlowCard} from '@/api/getData'

  export default {
    name: "dayFlowView",
    data() {
      return {
        chartData: {
          columns: ['日期', '用量'],
          rows: []
        },
        yearFlowStatic: 0,
      }
    },
    created() {
      this.initData();
    },
    methods: {
      initData() {
        this.chartData.rows = [];
        monthFlowCard({
          cardId: this.cardId
        }).then(s => {
          for (let i = 0; i < s.data.x.length; i++) {
            this.chartData.rows.push({
              '日期': s.data.x[i],
              '用量': s.data.y[i]
            })
          }
          this.yearFlowStatic = s.data.yearFlow?parseFloat(s.data.yearFlow/1024).toFixed(2):0;
        })

      }
    },
    props: {
      cardId: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style scoped>

</style>
